<template>
  <div class="app-container">
    <div class="Content">
      <div class="showArea" @dblclick="handleClick">
        <img
          :src="img"
          :class="{
            bigImg: !imgshow && !first,
            smallImg: imgshow && !first,
            show: first,
          }"
        >
      </div>
      <div class="welcome">
        <span class="font item1">欢</span>
        <span class="font item2">迎</span>
        <span class="font item3">使</span>
        <span class="font item4">用</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Welcome',
  data() {
    return {
      img: 'https://img.zcool.cn/community/01a0465ff716ba11013ee04d4faf3c.gif',
      imgshow: true,
      first: true
    }
  },
  methods: {
    handleClick() {
      this.imgshow = !this.imgshow
      this.first = false
    }
  }
}
</script>

<style lang="scss" scoped>
.Content{
  height: 100%;
  // border:1px solid black;
  overflow: hidden;
}

.welcome {
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
}
@keyframes right-left {
  from {
    transform: translate(-100%);
    opacity: 0;
  }
  to {
      transform: translate(0px);
    opacity: 1;
    left: 0%;
  }
}
@keyframes right-leftT {
  from {
    left: 100%;
    opacity: 0;
  }
  to {
    left: 0%;
    opacity: 1;
  }
}
@keyframes bigImg {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes smallImg {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.font {
  font-size: 20vh;
  line-height: 20vh;
  color: rgb(222, 222, 228);
  text-shadow: -3px -3px 1px white, 3px 3px 1px black;
  position: relative;
  left: 0px;
  animation: right-leftT 2s linear;

  //   background-image: -webkit-linear-gradient( right, green,yellow,blue);
  //   background-clip: text;
  //   -webkit-text-fill-color: transparent;
}
.showArea {
  width: 50%;
}
.show {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  overflow: hidden;
  img {
    width: 100%;
  }
  animation: right-left 2s linear;
}
.bigImg {
  width: 200%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  overflow: hidden;
  transition: all 1s;
  img {
    width: 100%;
  }
  animation: bigImg 2s;
}
.smallImg {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  overflow: hidden;
  transition: all 1s;
  img {
    width: 100%;
  }
  animation: smallImg 2s;
}

.app-container {
  box-sizing: border-box;
  background-color: #e3e3e3;
  height: calc(100vh - 50px);
  padding: 30px 60px 0px;
  // border: 1px solid red;
}
</style>

